Drawing text about it’s visual center

Drawing text about it’s visual center is no easy task. Calculating the vertical center of text is tricky because the FontMetrics class doesn’t give you a mechanism to get at the visual bounds – it only gives you the full bounds of a given string, which includes ascent and descent.

When I first set out to do this, I ended up with code that looked like this:

graphics.setFont(new Font("Helvetica", Font.BOLD, 32));

// get the visual center of the component.
int centerX = getWidth()/2;
int centerY = getHeight()/2;

// get the bounds of the string to draw.
FontMetrics fontMetrics = graphics.getFontMetrics();
Rectangle stringBounds = fontMetrics.getStringBounds(text, graphics).getBounds();

// calculate the lower left point at which to draw the string. note that this we
// give the graphics context the y corridinate at which we want the baseline to
// be placed. thus, we calculate our bottom y point by using only the ascent portion
// of the font, so that it is visually centered about the ascent area.
int textX = centerX - stringBounds.width/2;
int textY = centerY + fontMetrics.getAscent()/2;

graphics.drawString(text, textX, textY);

This yielded something like in the following graphic (the red box is the string bounds):

Everything looks fine, right? OK, lets try changing the font to Lucida Grande and see what happens:

Ugh! What happened? I know nothing about fonts, but Lucida Grande seems to have some extra space in it’s ascent, so centering on the ascent space alone doesn’t yield text that is visually centered.

Back to the drawing board.

All we really need is a mechanism to get the visual bounds of the string we want to draw. After poking around for a while, I found just this in GlyphVector which offers a getVisualBounds method. So lets take another crack at that code:

graphics.setFont(new Font("Helvetica", Font.BOLD, 32));

// get the visual center of the component.
int centerX = getWidth()/2;
int centerY = getHeight()/2;

// get the bounds of the string to draw.
FontMetrics fontMetrics = graphics.getFontMetrics();
Rectangle stringBounds = fontMetrics.getStringBounds(text, graphics).getBounds();

// get the visual bounds of the text using a GlyphVector.
Font font = graphics.getFont();
FontRenderContext renderContext = graphics.getFontRenderContext();
GlyphVector glyphVector = font.createGlyphVector(renderContext, text);
Rectangle visualBounds = glyphVector.getVisualBounds().getBounds();

// calculate the lower left point at which to draw the string. note that this we
// give the graphics context the y corridinate at which we want the baseline to
// be placed. use the visual bounds height to center on in conjuction with the
// position returned in the visual bounds. the vertical position given back in the
// visualBounds is a negative offset from the basline of the text.
int textX = centerX - stringBounds.width/2;
int textY = centerY - visualBounds.height/2 - visualBounds.y;

graphics.drawString(text, textX, textY);

This yields the following when run with Helvetica and Lucida Grande:

Success! The key here is to understand what the y position of the visual bounds represets. The returned bounds is centered about the baseline of the text, which means that the y value is a negative value. This allows us to calculate the basline relative to the visual center of the text, and then pass to the graphics context in order to draw the text.

If there are other ways to do this, I’d love to see them.